<template>
  <div id="opicList">
    <!-- 没登录显示精选 -->
    <div v-if="!isLogin">

      <div style="margin-top: -18px">
        <el-card class="box-card" style="height: 70px;" >
            <span style="float:left;;height: 30px;font-weight: bolder">精选</span>
            <el-button class="el-icon-link" style="float: right;margin-right: 10px;margin-top: -10px" type="text" @click="needLogin">更多
            </el-button>

        </el-card>
        <el-card class="box-card" v-for="t in topicList" :key="index" style=";margin-top: 3px;height: 120px">
          <span>
             <el-link target="_blank" @click="needLogin" style="float:left;margin-top: 15px;font-size: 16px;color: #000000">
               {{ t.content }}
             </el-link>
          </span>
          <div style="margin-top: 50px">
            <i class="el-icon-star-off"><span  style="font-size: 12px;color:#909399;">{{t.collectNum}}</span></i>
            <i class="el-icon-chat-dot-square" style="margin-left: 30px"><span style="font-size: 12px;color:#909399;">{{t.commentNum}}</span></i>
          </div>
          <el-divider style="height: 5px"></el-divider>
        </el-card>
      </div>
    </div>

    <!-- 登录后的题目列表 -->
    <!-- 用户已经登录了显示的题目列表以及兴趣标签 -->
    <!--用户选择了的兴趣展示-->
    <div v-if="isLogin">
      <div style="float:left;">
        <el-tag :type="this.interestingHint.style">{{this.interestingHint.message}}</el-tag>
        <div style="float:right" v-for="o in this.interestTagList" :key="index">
          <el-tag type="success" style="width: 90px;text-align:center">{{o.value}}</el-tag>
        </div>
      </div>
      <div>
        <el-button type="primary" style="height: 35px;" @click="openInteresting">设置兴趣标签</el-button>
      </div>
    </div>
    <!--设置兴趣标签弹窗-->
    <el-dialog title="修改兴趣" :visible.sync="interestingFormVisible" style="width: 1000px;margin-left: 400px">
      <p>您选择的兴趣(最多四个哦)：</p>
      <div v-for="tag in this.updateInterestingList" :key="index">
        <!--@close="handleClose(tag.id)为删除标签所用-->
        <el-tag closable @close="handleClose(tag.id)" style="float: left;margin-left: 2px;width: 90px">{{ tag.value }}</el-tag>
      </div>
      <br><br>
      <p>选择你要添加的：</p>
      <div v-for="(val,key) in this.allObjectList" :key="index">
        <el-tag style="float: left;margin-left: 2px;width: 80px" @click="selectInteresting(val)">{{val.value}}</el-tag>
        <div v-if="(key+1)%4==0?true:false">
          <br><br>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateInterestingCancelButton">取 消</el-button>
        <el-button type="primary" @click="updateInterestingSureButton">确 定</el-button>
      </div>
    </el-dialog>

    <div v-if="isLogin">
    <el-card class="box-card" style="margin-left: -10px;margin-top:2px;" v-if="isLogin">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: -20px" clas=".el-main">
        <!--最新题目-->
        <el-tab-pane label="最新" name="first" >
          <el-card class="box-card" v-for="t in topicNewList" :key="index" style="margin-left: -10px;margin-top: -1px;height: 120px">
            <div slot="" class="clearfix" style="height: 80px;">
                  <span style="float:left;height: 30px;margin-top: 15px">
                    <el-link target="_blank" @click="showTopicBtn(t.id)" style="font-size: 16px;margin-top: -20px;color: #000000">{{ t.content }}</el-link>
                  </span>
            </div>
            <div style="margin-top:-30px">
              <i :class="t.userIsCollect==true?'el-icon-star-on':'el-icon-star-off'"><span style="font-size: 12px;color:#909399;">{{t.collectNum}}</span></i>
              <i class="el-icon-chat-dot-square" style="margin-left: 30px"><span style="font-size: 12px;color:#909399;">{{t.commentNum}}</span></i>
            </div>
          </el-card>
        </el-tab-pane>
        <!--热门题目-->
        <el-tab-pane label="热门" name="second">
          <el-card class="box-card" v-for="t in topicHotList" :key="index" style="margin-left: -10px;margin-top: -1px;height: 120px">
            <div slot="" class="clearfix" style="height: 80px;">
                  <span style="float:left;height: 30px;;margin-top: 15px">
                    <el-link target="_blank" @click="" style="font-size: 16px;color: #000000" @click="showTopicBtn(t.id)">{{ t.content }}</el-link>
                  </span>
            </div>
            <div style="margin-top: -30px">
              <i :class="t.userIsCollect==true?'el-icon-star-on':'el-icon-star-off'"><span style="font-size: 12px;color:#909399;">{{t.collectNum}}</span></i>
              <i class="el-icon-chat-dot-square" style="margin-left: 30px"><span style="font-size: 12px;color:#909399;">{{t.commentNum}}</span></i>
            </div>
            <!--<el-divider style="height: 5px"></el-divider>-->
          </el-card>
        </el-tab-pane>

      </el-tabs>
    </el-card>
    </div>
  </div>

</template>

<script>

export default {
  name: "TopicList",
  data() {
    return {
      isLogin: false, //如果登录了就显示登录后的题目列表，以及兴趣标签
      activeName: 'first',
      interestingHint:{ //用于控制当前用户是否添加了兴趣的显示
        style:'',
        message: ''
      },
      interestTagList:[{ //用户已经选择了的兴趣标签列表
        id: '',order: '',type: '',value: ''
      }],
      topicList: [{  //精选题目列表
        collectNum: '',
        commentNum: '',
        content: ''
      }],
      topicNewList:[{ //最新题目
        content:'',
        collectNum: '',
        commentNum: '',
        difficultyLevelId: '',
        id: '',
        objectId: '',
        time: '',
        title: '',
        topicTypeId: '',
        userId: '',
        userIsCollect:''
      }],
      topicHotList:[{
        content:'',
        collectNum: '',
        commentNum: '',
        difficultyLevelId: '',
        id: '',
        objectId: '',
        time: '',
        title: '',
        topicTypeId: '',
        userId: '',
        userIsCollect:''
      }],
      interestingFormVisible: false,//控制兴趣标签窗口
      updateInterestingList:[{ //修改兴趣的列表
        id:'',order:'',type:'',value:''
      }],
    }
  },
  methods: {

    //如果没登录不显示兴趣标签和最新以及热门，显示精选
    orNotLogin(){
      if(this.$store.getters.loginFlag==1){
        this.isLogin=true
      }
      /*this.$myAxios('/lastIndex/testIsLoginJ','post',null,resp=>{
        console.log(resp)
        if(resp.data.code==200 || resp.data.code==201){

        }
      })*/
      if(this.isLogin){ //已经登录
        this.getUserInteresting()
        this.getNewTopicList()
      }
      else{ //没登录
        //获取精选题目列表
        //his.isLogin=false
        this.getNotLoginTopic()
      }
    },
    //最新最热选项卡
    handleClick(tab, event) {
      if(this.activeName=='second'){
        this.getHotTopicList();
      }
      else if(this.activeName=='first'){
        this.getNewTopicList()
      }
      console.log(tab, event);
    },
    //未登录-获取精选题目
    getNotLoginTopic(){
      this.$myAxios('/lastIndex/getTopicJ','post',null,resp=>{
        this.topicList=resp.data.data;
        console.log(resp);
      }).catch(error=>{
        console.log(error)
      })
    },
    //获取最新的题的信息
    getNewTopicList(){
      this.$myAxios('/frontPage/getNewTopicListJ','post',null,resp=>{
        console.log(resp);
        this.topicNewList=resp.data.data;
      })
    },
    //获取最热的题的信息
    getHotTopicList(){
      this.$myAxios('/frontPage/getHotTopicListJ','post',null,resp=>{
        console.log(resp);
        this.topicHotList=resp.data.data;
      })
    },
    //获取当前用户兴趣
    getUserInteresting(){
      this.$myAxios('/frontPage/getUserInterestingJ','post',null,resp=>{
        console.log(resp);
        if(resp.data.data.length<1){
          this.interestingHint.message='当前用户未选择兴趣';
          this.interestingHint.style='danger';
          //this.interestTagList=null;//将展示用户的兴趣列表值为null否则前端会显示出无字框
          this.interestTagList.splice(0,1);//将展示用户的兴趣列表的空串都删掉否则前端会显示出无字框
        }
        else{
          this.interestingHint.message='当前用户的兴趣:';
          this.interestingHint.style='info';
          this.interestTagList=resp.data.data;//赋值给用户选择的兴趣列表
        }
      })
    },
    //打开兴趣弹窗
    openInteresting(){
      this.interestingFormVisible=true;
      //获取当前用户已经选择的兴趣
      this.$myAxios('/frontPage/getUserInterestingJ','post',null,resp=>{
        console.log(resp);
        if(resp.data.data.length<1){ //如果用户还没选择兴趣那就不做操作,

          this.updateInterestingList.splice(0,1)//把用户已经选择的兴趣列表的空串删掉，要不然会有显示出边框有bug
        }
        else{ //说明用户已经选择了兴趣
          this.updateInterestingList=resp.data.data;//赋值给用户修改兴趣的列表
        }
      })
      //获得所有科目分类
      this.$myAxios('/frontPage/getAllObjectJ','post',null,resp=>{
        console.log(resp);
        this.allObjectList=resp.data.data;
      })
    },
    //删除用户已经选择的兴趣
    handleClose(tag) {  //tag为用户已经选择的兴趣列表里的id，我们要到列表里进行循环，找到我们要删除的哪一项
      for(let i=0;this.updateInterestingList.length;i++){
        if(tag==this.updateInterestingList[i].id){
          this.updateInterestingList.splice(i, 1);
          break;
        }
      }
      //alert(this.updateInterestingList.length)
    },
    //用户添加兴趣（点击触发）
    selectInteresting(val){
      if(this.updateInterestingList.length<4){ //用于限制用户设置兴趣最大为4个
        if(this.updateInterestingList.length==0){ //当用户没有选择兴趣或者都删除的情况下，此时数组为空，那么久之间添加
          this.updateInterestingList.push(val);
        }
        else{ //else说明数组不是空的，那么就进行判断
          for(let i=0;this.updateInterestingList.length;i++){
            if(this.updateInterestingList[i].id==val.id){ //重复了就直接跳出循环，不进行添加
              //alert("重复了")
              break;
            }
            else{ //else说明本轮循环中没有重复，
              if(i==this.updateInterestingList.length-1){ //如果i和数组长度值-1相等说明在此数组中没有和val.id相同的就把他放到数组中
                this.updateInterestingList.push(val);
                break;
              }
            }
          }
        }
      }
      else{ //选择兴趣大于4个的情况
        this.$message({
          message: '最多只能选择4个',
          type: 'error'
        });
      }
    },
    //修改兴趣标签的确定按钮
    updateInterestingSureButton(){
      if(this.updateInterestingList.length==0){ //非空验证
        this.$message({
          message: '你还没有选择兴趣哦',
          type: 'error'
        });
        return;
      }
      if(this.updateInterestingList.length==this.interestTagList.length){ //不能重复验证
        var k=0;
        for(let i=0;i<this.updateInterestingList.length;i++){
          for(let j=0;j<this.interestTagList.length;j++){
            if(this.updateInterestingList[i].id==this.interestTagList[j].id){
              k=k+1;
              break;
            }
          }
        }
        if(k==this.interestTagList.length){
          this.$message({
            message: '你还没有做出修改哦',
            type: 'error'
          });
          return;
        }else{//说明合法就去后台修改
          this.updateInterestingToBack();
        }
      }
      else{ //说明数据都是合法的验证完毕，向后台发起请求，添加兴趣标签
        this.updateInterestingToBack();
      }
    },
    //向后台发起修改兴趣请求
    updateInterestingToBack(){
      this.$myAxios('/frontPage/setInterestingByUserJ','post',this.updateInterestingList,resp=>{
        this.$message({
          message: resp.data.message,
          type: 'success'
        });
        this.interestingFormVisible=false;//关闭弹窗
        this.updateInterestingList.splice(0,this.updateInterestingList.length);//将用户选择的兴趣标签数组全部清除
        this.getUserInteresting();//再次执行获取用户已经选择的标签来刷新页面
        this.getNewTopicList();//再次执行获取最新题目来刷新页面
      });
    },
    //修改兴趣标签的取消按钮
    updateInterestingCancelButton(){
      this.interestingFormVisible=false;//关闭弹窗
      this.updateInterestingList.splice(0,this.updateInterestingList.length);//将用户选择的兴趣标签数组全部清除
    },

    //点击题目触发
    showTopicBtn(id){
      //跳转页面到详细题目页面，将题目id传过去
      let routeData = this.$router.resolve({
        path: "/showTopic",
        query: {
          id:id
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },

  },

  created() {
    //判断是否登录并加载相应的题目列表
    this.orNotLogin();

  }
}
</script>

<style scoped>

</style>